@use '../../util/input-field' as input-field;

.sx__date-input-wrapper {
  position: relative;
}

.sx__date-input-chevron-wrapper {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0;
  transition: transform 0.2s ease-in-out;

  &:focus {
    border: 2px solid var(--sx-color-primary);
  }

  .is-disabled & {
    pointer-events: none;
    cursor: not-allowed;
  }

  .sx__date-input--active & {
    transform: translateY(-50%) rotate(180deg);
  }

  [dir="rtl"] & {
    left: 1rem;
    right: auto;
  }
}

.sx__date-input-chevron {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  filter: brightness(0.7);
}

.sx__date-input {
  @include input-field.input-element;

  width: 100%;

  .is-disabled & {
    pointer-events: none;
  }

  .sx__date-input--active & {
    border-color: var(--sx-color-primary);
    outline: 1px solid var(--sx-color-primary);
  }
}

.sx__date-input-label {
  @include input-field.input-label;

  .sx__date-input--active & {
    color: var(--sx-color-primary);
  }

  .is-dark & {
    display: none;
  }
}
